<div class="processor-ui-container-header">
  <button
    aria-label="{{ processor.collapsed ? 'Expand Processor' : 'Collapse Processor' }}"
    tooltip="{{ processor.collapsed ? 'Expand Processor' : 'Collapse Processor' }}"
    tooltip-append-to-body="true"
    ng-click="processor.collapsed = !processor.collapsed"
    type="button"
    class="btn btn-primary btn-xs processor-ui-container-header-toggle">
    <i aria-hidden="true" ng-class="{ 'fa-caret-down': !processor.collapsed, 'fa-caret-right': processor.collapsed }" class="fa"></i>
  </button>

  <div class="processor-ui-container-header-title">
    <span class="processor-title">
      {{processor.title}}
    </span>

    <span class="processor-description">
      - {{ processor.description }}
    </span>

    <!-- error -->
    <span ng-if="processor.error" class="processor-description danger">
      - Error
    </span>
  </div>

  <div class="processor-ui-container-header-controls btn-group">
    <button
      aria-label="Increase Priority"
      tooltip="Increase Priority"
      tooltip-append-to-body="true"
      ng-click="pipeline.moveUp(processor)"
      type="button"
      class="btn btn-xs btn-primary"
      ng-disabled="pipeline.hasCompileError">
      <i aria-hidden="true" class="fa fa-caret-up"></i>
    </button>

    <button
      aria-label="Decrease Priority"
      tooltip="Decrease Priority"
      tooltip-append-to-body="true"
      ng-click="pipeline.moveDown(processor)"
      type="button"
      class="btn btn-xs btn-primary"
      ng-disabled="pipeline.hasCompileError">
      <i aria-hidden="true" class="fa fa-caret-down"></i>
    </button>

    <button
      aria-label="Remove Processor"
      tooltip="Remove Processor"
      tooltip-append-to-body="true"
      ng-click="pipeline.remove(processor)"
      type="button"
      class="btn btn-xs btn-danger"
      ng-disabled="pipeline.hasCompileError && !processor.error">
      <i aria-hidden="true" class="fa fa-times"></i>
    </button>
  </div>
</div>
